import * as CONFIG from '@/utils/LowCode/config.js'
// 边框渐变背景色
export const changeBorderStyle = (code,stylesForm) => {
    let borderBgId = `borderBg${code}`
    if (document.querySelector(`#dataV${code}`)) {
      const borderElement = document.querySelector(`#dataV${code}`).querySelector('.dv-border') || document.querySelector(`#dataV${code}`)?.querySelector('.dv-border-svg-container')
      if (borderElement) {
        if(stylesForm.colorType === 'gradient'){
            let isBorder7 = false
            borderElement.childNodes.forEach(e => {
                if(e.className){
                    if (e.className.baseVal === 'dv-bb7-line-width-2') {
                        isBorder7 = true
                    }
                }
            })
            borderElement.style.opacity = (stylesForm.opacity / 100)
            if(!isBorder7){
                let gradientDirection = ''
                switch (stylesForm.gradientDirection) {
                case 'to right':
                    gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
                    break
                case 'to left':
                    gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
                    break
                case 'to bottom':
                    gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
                    break
                case 'to top':
                    gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
                    break
                case 'to bottom right':
                    gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
                    break
                case 'to bottom left':
                    gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
                    break
                case 'to top right':
                    gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
                    break
                case 'to top left':
                    gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
                    break
                default:
                    gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
                    break
                }
                // 在目标元素内的第一个位置插入 <defs> 和其中的内容
                borderElement.insertAdjacentHTML(
                'afterbegin',
                `<defs>
                        <linearGradient id="${borderBgId}" ${gradientDirection}>
                        <stop offset="0%" stop-color="${stylesForm.gradientColor[0]}" />
                        <stop offset="100%" stop-color="${stylesForm.gradientColor[1]}" />
                        </linearGradient>
                </defs>`
                )
            }else{
              borderElement.style.background = `linear-gradient(${stylesForm.gradientDirection},${stylesForm.gradientColor[0]}, ${stylesForm.gradientColor[1]})`
              isBorder7 = false
            }
        }else{
            borderElement.style.opacity = 1
        }
        
      }
    }
}
//获取边框组件文件
export const borderComponents = ()=>{
    const imageFiles = import.meta.glob(`./images/*.png`);
    let ImageList = []
    for (const key in imageFiles) {
        let imgPath = key.split('/')[2].split('.')[0]
        ImageList.push({
            img:imgPath,
            title:CONFIG.BORDER_LIST.find(v=> v.type === imgPath)?.label
        })
    }
    return {
        imgFiles:ImageList,
    }
}